/**
 * Created by maiseries on 2018/1/4.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    ActivityIndicator
} from 'react-native';
import FormStatus from './FormStatus'

let self = null;

export default class SubmitBtn extends React.Component {

    static propTypes = {
        style: React.PropTypes.number,
        text: React.PropTypes.string.isRequired,
        onPress: React.PropTypes.func.isRequired,
        control: React.PropTypes.string,
        editColor: React.PropTypes.string,
        readyColor: React.PropTypes.string,
        textColor: React.PropTypes.string,
        loadingColor: React.PropTypes.string
    }

    static defaultProps = {
        control: true,
        editColor: layout.DISABLED_COLOR,
        readyColor: layout.MAIN_COLOR,
        textColor: '#fff',
        loadingColor: '#fff'
    }

    constructor(prop) {
        super(prop);
        this.state = {}
    }

    render() {
        return (
            <TouchableOpacity
                style={styles.outer}
                onPress={() => this.props.control === FormStatus.READY ? this.props.onPress() : {}}
                activeOpacity={layout.TOUCH_OPACITY_ACTIVE}>
                <View style={[base.rowCC, styles.box, this.props.style, {
                    backgroundColor: this.props.control === FormStatus.EDIT ? this.props.editColor : this.props.readyColor
                }]}>
                    {
                        this.props.control === FormStatus.SUBMITTING ?
                            <ActivityIndicator color={this.props.loadingColor}/> :
                            <Text allowFontScaling={false} style={[styles.text, {
                                color: this.props.textColor
                            }]}>{this.props.text}</Text>
                    }

                </View>
            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({
    outer: {
        alignSelf: 'stretch',
    },
    box: {
        alignSelf: 'stretch',
        marginTop: layout.height(60),
        height: layout.height(100),
        borderRadius: layout.width(4)
    },
    text: {
        color: '#fff',
        fontSize: layout.font(32)
    }
});